<template>
  <div class="w100">
    <div class="bar">
        <div class="playingSong" @click="changeLyricCard">
          <span v-if="songname == ''">暂无播放歌曲</span>
          <span v-if="songname !== ''">正在播放 - {{songname}}</span>
        </div>
        <audio :src="url" @timeupdate="getCurrentTime" ref="audio" controls autoplay></audio>
    </div>
    <div class="lyric-card" v-show="lyricCardFlag">
      <!-- 歌名 -->
      <div class="header-title text-white bg-black text-l text-weight-6 px-4 py-3">
        {{songname}}
      </div>
      <div @click="backToPage" class="lyric-card-back position-f pl-3">
        <i class="iconfont" style="font-size: 1.6rem; color: #FFFFFF;">&#xe64f;</i>
      </div>
      <li class="lyric-word" v-for="(item,index) in lyricArr">{{item}}</li>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return{
        songname: '',
        //控制歌词页面的显示与隐藏
        lyricCardFlag: false,
        //歌词数组
        lyricArr:[],
        //歌词时间数组
        timeArr:[],
        time: 0,
        j: 0
      }
    },
    props: {
      url: String
    },
    mounted() {
      //this.getUrl()
    },
    methods: {
      ...mapGetters(['GET_MUSIC_URL','GET_MUSIC_NAME','GET_MUSIC_LYRIC','GET_MUSIC_TIME']),
      getUrl(){
        //this.url = this.GET_MUSIC_URL()
        this.$refs.audio.src = this.GET_MUSIC_URL()
      },
      getSongName(){
        this.songname = this.GET_MUSIC_NAME()
      },
      //控制歌词页面的显示与隐藏
      changeLyricCard(){
        this.lyricCardFlag = !this.lyricCardFlag
      },
      //获取歌词和时间
      getLyric(){
        this.lyricArr = this.GET_MUSIC_LYRIC()
        this.timeArr = this.GET_MUSIC_TIME()
        this.lyricCardFlag = true
      },
      //获取歌曲时间
      getCurrentTime(e){
        this.time = e.target.currentTime
        document.querySelectorAll('.lyric-word')[this.j].style.color = '#a6a6a6'
        this.j=0
        for (let i=0;i<this.timeArr.length;i++) {
          if(this.timeArr[i]<this.time && this.time<this.timeArr[i+1]){
            document.querySelectorAll('.lyric-word')[i].style.color = '#FFFFFF'
            this.j = i
            break
          }else{
            continue
          }
        }
      },
      backToPage(){
        this.lyricCardFlag = false
      }
    },
    computed:{
      urlVal(){
        return this.$store.state.musicURL
      },
      nameVal(){
        return this.$store.state.musicName
      },
      lyricVal(){
        return this.$store.state.musicLyric
      }
    },
    watch:{
      urlVal(){
        this.getUrl()
      },
      nameVal(){
        this.getSongName()
      },
      lyricVal(){
        this.getLyric()
      }
    }
  }
</script>

<style lang="scss">
  .bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 5;
    audio {
      height: 2.5em;
      width: 100%;
      display: block;
      background-color: #f1f3f4;
    }
    .playingSong{
      height: 1.5rem;
      width: 100%;
      padding-left: 1.5rem;
      background-color: #f1f3f4;
      letter-spacing: 0.1rem;
      border-top: 1px solid #000000;
      border-bottom: 1px solid #000000;
      span{
        font-size: 0.8rem;
      }
    }

  }
  .lyric-card{
    width: 100%;
    position: fixed;
    top: 0;
    overflow: auto;
    height: 100%;
    padding-top: 2rem;
    padding-bottom: 10rem;
    text-align: center;
    background-color: #000000;
    color: #a6a6a6;
    z-index: 4;
    .lyric-card-back{
      top: 3rem;
    }
  }
</style>
